<template>
  <div class="Content" style="width: 100%; min-height: 500px; max-height: 620px;">
    <el-card class="rightTable">
      <div slot="header" class="rightHeader">
        <h3 class="area">
          {{logName}}
          <span class="color">({{isArea ? '所属区域' : '所属栏目'}})</span>
        </h3>
      </div>
      <div class="time-wrap">
        <div class="left-w">
          所属时间
          <el-select v-model="fileYear" class="fileYear">
            <el-option
              v-for="item in yearOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select v-model="fileMonth" class="fileYear">
            <el-option
              v-for="item in monthOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <!-- <el-date-picker
            v-model="fileTime"
            format="yyyy-MM"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择月"
            :picker-options="endDateDisabled" 
          ></el-date-picker>-->
          <el-button
            type="primary"
            style="background: #7f92f7;border-color: #7f92f7; padding: 8px 15px;margin-left: 15px;"
            @click="goSearch"
            size="small"
          >查询</el-button>
        </div>
        <div>
          <el-button
            type="primary"
            style="background: #7f92f7;border-color: #7f92f7; padding: 8px 15px"
            size="small"
            @click="nextPath('/budget/knowledgSharing/uploadShare')"
          >上传分享</el-button>
          <el-button
            type="success"
            style="background: #7ed093;border-color: #7ed093; padding: 8px 15px"
            size="small"
            @click="uploadAll"
          >上传汇总</el-button>
        </div>
      </div>
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        :header-cell-style="{background:'#eff0f4',color:'#636d9a', padding: '6px 0', 'font-size': '12px', 'text-align': 'center'}"
        :cell-style="{padding: '8px 0',color:'#636d9a', 'font-size': '12px', 'text-align': 'center'}"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        ref="table"
        max-height="500"
      >
        <el-table-column
          v-for="item in tableTitle"
          show-overflow-tooltip
          :key="item.id"
          :label="item.label"
          :prop="item.id"
          :min-width="item.width"
        ></el-table-column>
        <el-table-column label="操作" width="95" align="center">
          <template slot-scope="scope">
            <span style="color:#7f92f7;cursor: pointer; " @click="toDetail(scope.$index, scope.row)">查看详情</span>
            <!-- <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              v-show="scope.row.isCurrentUser==1"
            >编辑</el-button>-->
            <!-- <el-button
              size="mini"
              type="primary"
              style="background: #FF6a07;border-color: #FF6a07"
              @click="toDetail(scope.$index, scope.row)"
            >查看</el-button>-->
            <!-- <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              v-show="scope.row.isCurrentUser==1"
            >删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>

      <!-- 翻页 -->
      <div class="page" v-if="dataTotal">
        <el-pagination
          layout="total,sizes, prev, pager, next, jumper"
          :page-sizes="[10, 50, 100]"
          @size-change="sizeChange"
          :page-size="pageSize"
          :total="dataTotal"
          :current-page.sync="currentPage"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog :visible.sync="showUploadAll" width="870px" class="showUploadAll">
      <div slot="title">上传汇总</div>
      <div class="contentTitle">
        <p>
          区域:
          <dx-cascader :area_id.sync="areaId" ref="cascader" :maxLevel="3" />
        </p>
        <p>
          日期:
          <el-date-picker size="small" v-model="date" type="year" placeholder="选择年"></el-date-picker>
        </p>
        <el-button type="primary" size="small" class="selfClass" @click="search">查询</el-button>
      </div>
      <el-table
        :header-cell-style="{background:'#eff0f4'}"
        :data="uploadListData"
        v-loading="searchLoading"
        style="width: 100%;margin-top: 10px;"
        border
        stripe
        height="69vh"
        ref="table"
      >
        <el-table-column
          v-for="item in upTableTitle"
          :width="item.id=='areaName'?'':60"
          :key="item.id"
          :label="item.label"
          :prop="item.id"
          :align="item.center"
        >
          <template slot-scope="scope">
            <div v-if="item.id!='areaName'">
              <div v-show="scope.row[item.id].value=='是'">
                <el-tooltip placement="right-start">
                  <div slot="content">
                    <p>上传时间: {{scope.row[item.id].time}}</p>
                  </div>
                  <span>{{scope.row[item.id].value}}</span>
                </el-tooltip>
              </div>
              <p v-show="scope.row[item.id].value!='是'">{{scope.row[item.id].value}}</p>
            </div>
            <div v-else>{{scope.row[item.id]}}</div>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="showUploadAll = false" size="mini">取 消</el-button> -->
        <el-button type="primary" class="selfClass" @click="showUploadAll = false" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
import { _formatTime } from "@/utils/common";
export default {
  data() {
    return {
      upTableTitle: [
        { id: "areaName", label: "区域" },
        { id: "month1", label: "1月" },
        { id: "month2", label: "2月" },
        { id: "month3", label: "3月" },
        { id: "month4", label: "4月" },
        { id: "month5", label: "5月" },
        { id: "month6", label: "6月" },
        { id: "month7", label: "7月" },
        { id: "month8", label: "8月" },
        { id: "month9", label: "9月" },
        { id: "month10", label: "10月" },
        { id: "month11", label: "11月" },
        { id: "month12", label: "12月" }
      ],
      uploadListData: [],
      tableLoading: true,
      searchLoading: true,
      showUploadAll: false,
      tableData: [],
      fileId: null,
      logName: null,
      tableTitle: [
        { id: "typeName", label: "栏目", width: "120px" },
        { id: "title", label: "标题", width: "220px" },
        { id: "clickNum", label: "点击", width: "100px"},
        { id: "createUserName", label: "发布人", width: "105px"},
        { id: "areaName", label: "所属地区", width: "130px" },
        { id: "fileTime", label: "所属时间", width: "118px"},
        { id: "createTime", label: "上传日期", width: "170px" }
      ],
      areaId: null, //弹窗中区域选择的id记录
      fileTime: new Date(),
      // endDateDisabled: {
      //   disabledDate: time => {
      //     // return time.getTime() > Date.now() - 8.64e7;
      //     return time.getTime() > Date.now();
      //   }
      // },
      currentAreaName: "",
      isArea: "",
      fileYear: "",
      yearOptions: [
        {
          value: "",
          label: "全部"
        }
      ],
      fileMonth: "",
      monthOptions: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "01",
          label: "1月"
        },
        {
          value: "02",
          label: "2月"
        },
        {
          value: "03",
          label: "3月"
        },
        {
          value: "04",
          label: "4月"
        },
        {
          value: "05",
          label: "5月"
        },
        {
          value: "06",
          label: "6月"
        },
        {
          value: "07",
          label: "7月"
        },
        {
          value: "08",
          label: "8月"
        },
        {
          value: "09",
          label: "9月"
        },
        {
          value: "10",
          label: "10月"
        },
        {
          value: "11",
          label: "11月"
        },
        {
          value: "12",
          label: "12月"
        }
      ],
      currentPage: 1,
      pageSize: 10,
      dataTotal: 0
    };
  },
  computed: {
    logId() {
      return this.$store.state.main.logId;
    }
  },
  created() {
    this.date = new Date();
    const accountInfo = JSON.parse(sessionStorage.getItem("accountInfo"));
    this.areaId = accountInfo.areaId;
    this.getYears();
    this.getList();
  },
  beforeRouteUpdate(to, from, next) {
    console.log(111, to, from, next);
    // if(to.fullPath!=from.fullPath){
    //     next()
    //     this.changeUser()
    // }
    // if (from.name === "fastAccessAuthAddNew") {
    //   this.search();
    // }
     next();
  },
  methods: {
    uploadAll() {
      this.search();
      this.showUploadAll = true;
    },
    handleEdit(index, row) {
      this.fileId = row.fileId;
      this.$router.push({
        path: "/budget/knowledgSharing/uploadShare",
        query: { seq: row.fileId }
      });
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          $budgetAPI.shareDeleteFiles(
            { fileId: row.fileId },
            res => {
              this.alertError(res);
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功"
                });
                this.getList();
              }
            },
            err => {}
          );
        })
        .catch(() => {});
    },
    nextPath(path) {
      this.$router.push({ path: path });
    },
    search() {
      const year = this.date.getFullYear();
      this.searchLoading = true;
      $budgetAPI.budgetShareUpload(
        { areaId: this.areaId, year: year },
        res => {
          this.alertError(res);
          if (res.code == 0) {
            this.uploadListData = res.content;
          }
          this.searchLoading = false;
        },
        err => {
          this.searchLoading = false;
        }
      );
    },
    toDetail(index, row) {
      this.fileId = row.fileId;
      this.$router.push({
        path: "/budget/knowledgSharing/uploadShareDetail",
        query: { seq: row.fileId }
      });
    },
    async getList() {
      let that = this;

      $budgetAPI.budgetShareList(
        {
          logId: this.logId,
          fileYear: that.fileYear,
          fileMonth: that.fileMonth,
          currentPage: that.currentPage,
          pageSize: that.pageSize
        },
        res => {
          this.alertError(res);
          if (res.code == 0) {
            this.logName = res.content.currentAreaName;
            this.isArea = res.content.isArea;
            res.content.data.items.map(it => {
              it.fileTime = it.fileYear + "/" + it.fileMonth;
              it.createTime = that.formatTime(it.createTime);
            });
            console.log(res.content.data);
            this.tableData = res.content.data.items;
            this.dataTotal = res.content.data.totalNum;
            this.currentPage = res.content.data.currentPage;
          }
          this.tableLoading = false;
        },
        err => {
          this.tableLoading = false;
        }
      );
    },
    goSearch() {
      this.getList();
    },
    formatTime(date) {
      var date = new Date(date);
      var YY = date.getFullYear() + "/";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "/";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      // var hh =
      //   (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      // var mm =
      //   date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      //   ":";
      // var ss =
      //   date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return YY + MM + DD;
    },
    getYears() {
      let that = this;

      $budgetAPI.shareForyears({}, res => {
        console.log(res);
        res.content.map((it, i) => {
          that.yearOptions.push({ value: it, label: it + "年" });
        });
        that.fileYear = that.yearOptions[0].value;
        that.fileMonth = "";
      });
    },
    //页码改变
    sizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      //将当前页传到保存的form表单
      // this.begin = page;
      this.getList();
    }
  },
  watch: {
    logId: {
      handler(newValue, oldValue) {
        this.getList();
      },
      deep: true
    }
  }
};
</script>
<style lang="scss" scoped>
.rightTable {
  width: 100%;
  box-shadow: none;
  border-width: 0;
  /deep/ .el-card__body {
    padding: 0;
  }
  /deep/ .el-card__header {
    padding: 0;
    border-bottom-width: 0;
  }
  .page /deep/ .el-pager li.active {
    background-color: #6a82fd;
  }
  .page /deep/.el-pager li {
    min-width: 28px;
  }
  .rightHeader {
    // padding-top: 5px;
    color: #4e567b;
    > .area {
      display: flex;
      align-items: center;
      font-size: 14px;
      .color {
        color: #636d9a;
        padding-left: 5px;
      }
    }
    > .area:before {
      display: block;
      content: "";
      height: 100%;
      content: url("~@/assets/images/common/column.png");
      margin-right: 6px;
      margin-top: 5px;
      color: #666;
    }
  }
  /deep/
    > .el-card__body
    > .el-table>>.el-table__body-wrapper
    > table
    > tbody
    > tr {
    > td {
      color: #757b94;
      font-weight: 500;
    }
  }
  /deep/
    > .el-card__body
    > .el-table>>.el-table__header-wrapper
    > table
    > thead {
    color: #636d9a;
  }
}
.showUploadAll {
  /deep/ > .el-dialog > .el-dialog__body {
    padding: 15px 20px 0;
  }
  /deep/ > .el-dialog > .el-dialog__header {
    background: #5f6581;
    font-size: 15px;
    padding: 0 15px;
    color: white;
    line-height: 50px;
  }
  .contentTitle {
    display: flex;
    align-items: center;
    > p {
      margin-right: 14px;
      padding-left: 9px;
    }
  }
}
.selfClass {
  background: #7f92f7;
  border: #7f92f7;
}
.el-dialog__footer {
  padding: 0;
  background-color: #f3f3f3;
  margin-top: 23px;
}
.time-wrap {
  margin: 10px 20px 10px 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left-w {
    color: #666;
    font-size: 12px;
    display: flex;
    align-items: center;
  }
  .fileYear {
    width: 85px;
    height: 30px;
    margin-left: 10px;
    /deep/ .el-input__inner {
      border-radius: 0;
      border: 1px solid #ddd;
      height: 30px;
      font-size: 12px;
      color: #333;
    }
  }
  /deep/ .el-input__icon {
    line-height: 30px;
  }

  /deep/ .el-table th {
    padding: 6px 0;
  }
  .tableTh28 {
    /deep/ .el-table__header-wrapper .el-table th {
      padding: 6px 0;
    }

    /deep/ .el-table--border,
    /eddp/ .el-table--group {
      border: 1px solid #d6d8e4;
    }
    /deep/ .el-table__body .el-table__row {
      height: 40px;
    }
  }
}
</style>
